<template>
	<view class="addAdressButton">
		<view class="topBack">
			<text class="topBackTop">Hello！</text>
			<text class="topBackIn">{{pagesData.title}}</text>
		</view>
		<view class="addAdressBottom">
			<u-form :model="form" ref="uForm">
				<view class="addPetTopTitleDiv">
					<view class="addPetTopTitleLeft"></view>
					<text class="addPetTopTitleText">填写地址</text>
				</view>
				<view class="formBottom">
					<u-form-item label="宠主姓名" label-width="184rpx" prop="consignee">
						<u-input v-model="form.consignee" placeholder="请填写宠主姓名" />
					</u-form-item>
					<u-form-item label="手机号码" label-width="184rpx" prop="phone">
						<u-input v-model="form.phone" placeholder="请填写手机号码" />
					</u-form-item>
					<u-form-item label="所在地区" label-width="184rpx" prop="shdz">
						<u-input v-model="form.shdz" placeholder="请选择收货地址" type="select" @click="selectAdress" />
					</u-form-item>
					<u-form-item label="设为默认" label-width="500rpx">
						<!-- <u-input v-model="form.shdz" placeholder="请选择收货地址" type="select" @click="selectAdress"/> -->
						<view class="itemRightBottom" @tap="setAsDefault">
							<view class="itemRadio">
								<view class="activeRadio" v-if="activeAsDefault"></view>
							</view>
							<text class="radioText">设置默认</text>
						</view>
					</u-form-item>
					<u-form-item label="详细地址" label-width="314rpx" label-position="top" :border-bottom="false"
						prop="address_details">
						<u-input v-model="form.address_details" placeholder="请填写详细地址" />
					</u-form-item>
				</view>
				<button class="addSubmitButtonClass" @click="submit" v-if="pagesState=='add'">保存地址</button>
				<button class="deleteButtonClass" @click="deleteFun" v-if="pagesState=='edit'">删除</button>
				<button class="edisAddSubmitButton" @click="submit" v-if="pagesState=='edit'">保存地址</button>

			</u-form>
			<image class="topRightImg"
				src="https://chongwu.aitaoba.net/storage/uploads/20231118/c8b73aec0771a12f1cb828120c436ee4.png"></image>
		</view>
		<!-- 	<u-picker mode="region" v-model="show" :area-code='[form.prov_id, form.city_id, form.area_id]'
			@confirm="confirmFun" @cancel="show=false"></u-picker> -->
		<u-picker mode="multiSelector" v-model="show" :default-selector='defaultSelector' :range="multiSelector"
			range-key="name" @columnchange="columnchange" @confirm="confirmFun" @cancel="show=false"
			@defaultSelectorChage="defaultSelectorChage"></u-picker>
	</view>
</template>

<script>
	import {
		addAddress,
		getCityList,
		editAddress,
		delAddress
	} from '@/api/my.js'
	export default {
		components: {

		},
		data() {
			return {

				pagesState: 'add',
				pagesData: {
					title: '请宠主填写收货地址',
				},
				activeAsDefault: false,
				params: {
					province: true,
					city: true,
					area: true
				},
				show: false,
				form: {
					consignee: '',
					phone: '',
					shdz: '',

					prov_id: '13',
					city_id: '1303',
					area_id: '130304',
					is_default: '0',
					address_details: '',
				},
				rules: {

					consignee: [{
						required: true,
						message: '请输入宠主姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '请输入手机号码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					shdz: [{
						required: true,
						message: '请选择所在地区',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					address_details: [{
						required: true,
						message: '请输入详细地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

				},
				multiSelector: [
					// [1, 2, 3], 
					// [4, 5, 6],
					// [7, 8, 9]
				],
				defaultSelector: [0, 0, 0],
				pageTitle: '新增收货地址',
			};
		},

		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {
			// 获取省市区
			this.getProvincialAndUrbanAreas('0', 0);
		},

		onLoad(options) {
			// if (e.id) {
			// 	this.pagesState = 'edis'
			// 	this.pagesData.title = '请宠主编辑收货地址';
			// 	uni.setNavigationBarTitle({
			// 		title: '编辑收货地址'
			// 	})
			// } else {
			// 	this.pagesState = 'add'
			// 	this.pagesData.title = '请宠主填写收货地址';
			// 	uni.setNavigationBarTitle({
			// 		title: '新增收货地址'
			// 	})
			// }
			let that = this;

			if (options.item === undefined) {
				this.pagesState = 'add'
				this.pagesData.title = '请宠主填写收货地址';
				this.pageTitle = '新增收货地址'

				delete this.form.id;
			} else {
				this.pagesState = 'edit'
				this.pagesData.title = '请宠主编辑收货地址';
				this.pageTitle = '编辑收货地址'
				this.form = JSON.parse(decodeURIComponent(options.item));
				console.log(this.form, 'this.formthis.form')
				if (this.form.is_default == '0') {
					this.activeAsDefault = false
				} else if (this.form.is_default == '1') {
					this.activeAsDefault = true
				}
				this.form.shdz = this.form.address_name.replace(/,/g, "");
			}
			uni.setNavigationBarTitle({
				title: that.pageTitle
			})
		},

		watch: {

		},
		methods: {
			deleteFun() {
				let data = {
					id: this.form.id
				};
				delAddress(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功',

						})
						uni.navigateBack(-1);
					}
				}).catch((res) => {})
			},
			getProvincialAndUrbanAreas(pid, index) {
				let data = {
					pid,
				};
				getCityList(data).then((res) => {
					console.log(res, '城市')
					if (res.code == 200) {

						if (index < 3) {
							// this.multiSelector[index]=res.data;
							this.$set(this.multiSelector, index, res.data)

						}
						if (index < 2) {
							console.log(index, '看看index')
							this.getProvincialAndUrbanAreas(res.data[0].id, index + 1)
						}



						console.log(this.multiSelector, '看看默认的城市数据')


					}

				}).catch((res) => {})
			},
			defaultSelectorChage(e) {
				this.defaultSelector = e;
			},
			columnchange(e) {
				console.log(e, '看看选择改变时')
				// if(e.column==0){
				// 选择省时
				console.log(this.multiSelector[e.column][e.index], '999')
				this.getProvincialAndUrbanAreas(this.multiSelector[e.column][e.index].id, e.column + 1);
				// }

				console.log(e, '列发生改变时')
			},
			confirmFun(e) {
				// console.log(e, '看看选中的地区')
				// 	this.form.shdz = e.province.label + e.city.label + e.area.label;

				// 	this.form.prov_id = e.province.value;
				// 	this.form.city_id = e.city.value;
				// 	this.form.area_id = e.area.value;
				// this.defaultSelector
				this.form.shdz = this.multiSelector[0][this.defaultSelector[0]].name + this.multiSelector[1][this
					.defaultSelector[1]
				].name + this.multiSelector[2][this.defaultSelector[2]].name;
				this.form.prov_id = this.multiSelector[0][this.defaultSelector[0]].id;
				this.form.city_id = this.multiSelector[1][this.defaultSelector[1]].id;
				this.form.area_id = this.multiSelector[2][this.defaultSelector[2]].id;
				console.log(this.form, '看看新增准备的入参')
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						if (this.pagesState == 'add') {
							let data = this.form;
							addAddress(data).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: '添加成功',

									})
									uni.navigateBack(-1);
								}
							}).catch()
						} else if (this.pagesState == 'edit') {
							let data = this.form;
							editAddress(data).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: '编辑成功',

									})
									uni.navigateBack(-1);
								}
							}).catch()
						}

					} else {
						console.log('验证失败');
					}
				});
			},
			selectAdress() {
				console.log('点击了选择地区')
				this.show = true;
			},

			setAsDefault() {
				this.activeAsDefault = !this.activeAsDefault;
				if (this.activeAsDefault) {
					this.form.is_default = '1'
				} else {
					this.form.is_default = '0'
				}
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style lang="scss" scoped>
	.addAdressButton {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.topBack {
		width: 750rpx;
		height: 335rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		border-radius: 0rpx;
		display: flex;
		flex-direction: column;
		padding: 52rpx 0 0 30rpx;
		box-sizing: border-box;

	}

	.topBackTop {
		font-size: 50rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.topBackIn {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		margin-top: 5rpx;

	}

	.addAdressBottom {
		width: 750rpx;
		height: 82vh;
		background: linear-gradient(180deg, #FFF5B9 0%, #FFFFFF 17%, #FFFFFF 100%);
		border-radius: 50rpx 50rpx 0rpx 0rpx;

		border: 4rpx solid #683518;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.topRightImg {
		width: 263.72rpx;
		height: 226rpx;
		position: absolute;
		right: 0;
		top: -180rpx;
	}

	.addPetTopTitleDiv {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 50rpx 0 0 31rpx;
		box-sizing: border-box;
	}

	.addPetTopTitleLeft {
		width: 8rpx;
		height: 30rpx;
		background: #FAE24E;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 1rpx solid #683518;
	}

	.addPetTopTitleText {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		margin-left: 9rpx;
	}

	.formBottom {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 24rpx 60rpx 0 60rpx;
		box-sizing: border-box;
	}

	.itemRightBottom {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.itemRadio {
		min-width: 18rpx;
		min-height: 18rpx;
		background: #FFF7C4;
		border-radius: 18rpx;
		border: 1rpx solid #683518;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.activeRadio {
		min-width: 10rpx;
		min-height: 10rpx;
		border-radius: 10rpx;
		background: #FFBD05;

		border: 1rpx solid #683518;
		box-sizing: border-box;
	}

	.radioText {
		min-width: 104rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #797873;

		margin-left: 12rpx;
	}

	.addSubmitButtonClass {
		width: 690rpx;
		height: 80rpx;
		background: #FED24C;
		border-radius: 10rpx;

		border: 2rpx solid #683518;
		position: fixed;
		bottom: 20rpx;
		left: 30rpx;
		z-index: 3;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #683518;
		text-align: center;
		line-height: 80rpx;
	}

	.edisAddSubmitButton {
		width: 480rpx;
		height: 80rpx;
		background: #FED24C;
		border-radius: 10rpx;

		border: 2rpx solid #683518;
		position: fixed;
		bottom: 20rpx;
		right: 30rpx;
		z-index: 3;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #683518;
		text-align: center;
		line-height: 80rpx;
	}

	.deleteButtonClass {
		width: 200rpx;
		height: 80rpx;
		background: #E9E9E9;
		border-radius: 10rpx;

		border: 2rpx solid #E9E9E9;
		outline: none;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
		text-align: center;
		line-height: 80rpx;
		position: fixed;
		left: 30rpx;
		bottom: 20rpx;
	}
</style>